<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('流程任务流转')" />
    <style type="text/css">
    	html {background-color: #ffffff;}
    	body{background-color:#FFFFFF;}
    	.layui-form-label{padding: 5px 0px;width: 100px;}
		.layui-form-checkbox[lay-skin=primary] { padding-left: 22px}
		.layui-form-checkbox[lay-skin=primary] span {line-height: 15px}
    </style>
</head>
<body>
 <div class="layui-row" style="padding: 15px 15px;">
	<div class="layui-col-xs6">
		<div id="leftD" style="overflow: scroll;border:2px solid #ccc;text-align: center;">
			<img id="showImg" style="margin-top: 10px;">
		</div>
	</div>
	<form class="layui-form" id="form-task-pass">
		<input type="hidden" id="taskId" name="taskId" th:value="${taskId}">
		<input type="hidden" id="tableDataId" name="tableDataId" th:value="${tableDataId}">
		<div id="rightD" class="layui-col-xs6">
		<div class="layui-form-item">
			<label class="layui-form-label">任务主题：</label>
			<div class="layui-input-block">
				<input type="text" id="taskName" autocomplete="off" class="layui-input canntEdit" readonly th:value="${processTitle} +'－['+ ${taskName} +']'">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">紧迫程度：</label>
			<div class="layui-input-block">
				<input type="radio" name="priority" value="1" title="一般" th:checked="${taskPriority == 1}">
				<input type="radio" name="priority" value="2" title="重要" th:checked="${taskPriority == 2}">
				<input type="radio" name="priority" value="3" title="紧急" th:checked="${taskPriority == 3}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">简短附言：</label>
			<div class="layui-input-block">
				<textarea name="comment" id="comment" class="layui-textarea" placeholder="请输入内容，最多三百个字！" maxlength="300"></textarea>
			</div>
		</div>
		<div class="layui-form-item" style="margin-bottom: 0px;">
			<label class="layui-form-label">执行者：</label>
<!-- 			<div class="layui-input-block"> -->
<!-- 				<div style="float:right;margin-right:6px;"> -->
<!-- 					<input type="checkbox" name="medium" title="邮件通知" lay-skin="primary" value="mail" style="margin:0px;"> -->
<!-- 				</div> -->
<!-- 			</div> -->
		</div>
		<div  style="padding-left: 15px;">
		   <table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
		</div>
  	  </div>
	  <div class="layui-form-item layui-hide">
		<input type="button" lay-submit="" lay-filter="btn_save" id="btn_save" value="提交">
	  </div>
	</form>
 </div>
 <th:block th:include="include :: footer" />
 <script th:inline="javascript">
	 /*<![CDATA[*/
	 var prefix = ctx + "flowable/process";
	 var instanceId = [[${procInstId}]];
	 var jumpUrl = [[${jumpUrl}]];
	 var userInfoList = [[${userInfoList}]];
	 var activityType = [[${activityType}]];
	 var activityMulti = [[${activityMulti}]];
	 /*]]>*/
 </script>
 <script type="text/html" id="barDh">
	 {{# if(activityMulti == false){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs dhicon dh-remove" lay-event="del">&nbsp;删除</a>
	 {{# } }}
 </script>
 <script type="text/javascript">
	var listData=userInfoList;
	var $,layer,form,table,laydate,element,form,table;//定义layui模块
	layui.use(['layer','jquery','util','element','form','table'], function () {
		$ = layui.$,layer = layui.layer,util = layui.util,element=layui.element,form=layui.form,table=layui.table;
		var imgUrl =  prefix + '/getProcessImg/' + instanceId;
		$('#showImg').attr('src', imgUrl);
		$.tablelist.init({
			elem: '#dhtable'
			,data: listData
			,page:false
			,limit:10000
			,cols: [[
				{type:'numbers'},
				{field: 'userId',title: '员工编号',align:'center'},
				{field: 'userName',title: '员工姓名',align:'center'},
				{field: 'deptId',title: '部门编号',hide:true},
				{field: 'deptName',title: '所属部门',align:'center'},
				{title: '操作',templet:'#barDh',align:'center'}
				]
			]
		   ,defaultToolbar:[]
		   ,height:'full-295'
		});
        $('#leftD').height($('#rightD').height());
		//监听工具条
		table.on('tool(ftable)', function (obj) {
			var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
			switch(event){
				case "del":
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					listData=table.cache.dhtable;
					for(var i=0; i < listData.length; i++)if(!listData[i] || listData[i].length==0)listData.splice(i, 1);//删除一项
					table.reload('dhtable',{data : listData});
					break;
			}
		});
	});
	//提交调用的方法
	function processTaskCallback() {
		if ($.validate.form()) {
			var data =  $.common.formToJSON('form-task-pass');
			var tableData = table.cache.dhtable;
			if(activityType != "startEvent" && activityType != "endEvent" && tableData.length == 0){
				$.modal.alert("请选择下个环节执行者！", modal_status.FAIL);
			}else{
				var assignees = [];
				for (var i=0;i<tableData.length;i++){
					var rowData = tableData[i];
					assignees.push(rowData.userId);
				}
				data.assignees = assignees.join(",");
				if(data.medium ==  null){
					data.medium = "";
				}
				$.modal.loading("正在处理中，请稍后...");
				return {'url':ctx + jumpUrl, 'data':data};
			}
		}
	}
 </script>
</body>
</html>